Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Monitor Descriptions to the Status Page #3008

Open
1 task done
TritonB7 opened this issue Apr 1, 2023 · 4 comments · May be fixed by #4612
Open
1 task done

Add Monitor Descriptions to the Status Page #3008

TritonB7 opened this issue Apr 1, 2023 · 4 comments · May be fixed by #4612
Labels
area:status-page Everything related to the status page feature-request Request for new features to be added

Comments

@TritonB7
Copy link

TritonB7 commented Apr 1, 2023 •
edited
Loading

⚠️ Please verify that this feature request has NOT been suggested before.

  • I checked and didn't find similar feature request

🏷️ Feature Request Type

UI Feature

🔖 Feature description

Recently, the feature to add monitor model descriptions were added and these descriptions could be seen while hovering over the monitor in the dashboard. Can these same descriptions be displayed on the status page as well? With the option for hover and/or list the description underneath the monitor?

✔️ Solution

Our Uptime Kuma instance instance is only accessable by specific IP addresses so that my colleagues can view the status page. I do not want to give my colleagues access to the dashboard, where they could possible make unsupervised changes. Currently, the dashboard is the only way that I know of to view the descriptions.

I think it would be a nice feature to have the monitor model description viewable on the status page as well.

  • Create/edit a new monitor.

  • In the monitor settings - Add toggle to enable allow description to be viewable on status page.
    For example:

      Monitor1 - Enable "Show description on Status Page"
  Monitor2 - Disable "Show description on Status Page"
  Monitor3 - Enable "Show description on Status Page"

  • In the Status Page settings - Add global toggle to show Monitor Descriptions (e.g. if description is not empty/null)
    For example, after enabling this toggle:

       Monitor1 now displays a description underneath the monitor name on the Status Page.
   Monitor2 does not display description underneath the monitor name on the Status Page (the normal/current view).
   Monitor3 now displays a description underneath the monitor name on the Status Page.

Monitor Settings

Status Page Settings

Status-Page

❓ Alternatives

I am not aware of any current alternatives, if I could create multiple users with read permissions to the dashboard, the users would be able to see the descriptions as well, without having the descriptions displayed on the status page.

📝 Additional Context

No response
@TritonB7 TritonB7 added the feature-request Request for new features to be added label Apr 1, 2023
@CommanderStorm CommanderStorm added the area:status-page Everything related to the status page label Dec 3, 2023
@CommanderStorm CommanderStorm mentioned this issue Dec 14, 2023
Closed
1 task
@CommanderStorm CommanderStorm mentioned this issue Jan 2, 2024
Closed
1 task
@Tiago8v
Copy link

Tiago8v commented Jan 23, 2024 •
edited
Loading

Hello there, I had the same issue... and was able to bypass this "problem" by doing the following:

  1. add tags (any color) on each monitor with the description text that I wanted to add
  2. activate tags on status page
  3. add the following CSS code on the status page
.tag-wrapper {
  background: none !important; /* Hides colored background */
  color: #666 !important; /* Greys out text */
}

.tag-wrapper:first-child{
  padding-left: 68px !important; /* Spaces first element to align with the monitor name */
}

While not perfect, it served my case! Hope it helps you too!

status_example

@CommanderStorm
Copy link
Collaborator

@Geczy
Copy link

Geczy commented Feb 1, 2024 •
edited
Loading

i also came across the tag solution, here's my css

had to add the white space normal cause long descriptions weren't breaking

.tag-text {
white-space: normal !important;
color: black;
}
.tag-wrapper {
background-color: transparent !important;
}

CleanShot 2024-02-01 at 13 55 23@2x

@hmnd hmnd linked a pull request Mar 23, 2024 that will close this issue
Draft
6 tasks
@hmnd
Copy link

hmnd commented Mar 23, 2024 •
edited
Loading

To anyone looking here for an interim solution, here's a way to make the description appear as a tooltip:

  1. Add your description to a monitor as a tag, as described above. Set the tag's color to pink and don't use pink for any other tags. Alternatively, change the [style*="background-color: rgb(219, 39, 119)"] to :first-child to always apply the CSS to the first tag shown on a monitor.
  2. Add the following CSS to your status page:
/** remove this block if you need this to work with other tags */
.item > .row > div {
    display: flex;
}
.item > .row {
  position: relative;
}

div.tag-wrapper[style*="background-color: rgb(219, 39, 119)"]::before {
    visibility: visible;
    content: "ⓘ";
    font-size: 1.25rem;
    margin-right: 0.5rem;
    border-radius: 50rem !important;
    align-self: baseline;
    font-weight: bold;
    color: #626771;
}
div.tag-wrapper[style*="background-color: rgb(219, 39, 119)"] {
    /** remove this line if you need this to work with other tags */
    top: -0.75rem;

    visibility: hidden;
    transition: 0.2s 1s;
    max-width: 25rem;
    position: absolute;
    color: #fff;
    background-color: #293245 !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-right: 0.75rem !important;
    border-radius: 0.5rem !important;
    z-index: 999;
}
div.tag-wrapper[style*="background-color: rgb(219, 39, 119)"] .tag-text {
    white-space: normal !important;
}
div.tag-wrapper[style*="background-color: rgb(219, 39, 119)"]:where(
        :hover,
        :active
    )::before {
    color: #fff;
}
div.tag-wrapper[style*="background-color: rgb(219, 39, 119)"]:where(
        :hover,
        :active
    ) {
    visibility: visible;
    transition-delay: 0s;
}
Kooha-2024-03-23-00-59-17.mp4

@CommanderStorm CommanderStorm mentioned this issue Aug 21, 2024
Closed
@CommanderStorm CommanderStorm mentioned this issue Aug 29, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area:status-page Everything related to the status page feature-request Request for new features to be added
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: show monitor descriptions on status page hmnd/uptime-kuma
5 participants
@Geczy @Tiago8v @hmnd @CommanderStorm @TritonB7